<template>
  <div id="cooling-energy">
    <div class="chooseTime">
      <m-date :isTimeFlag="false"
              ref="mDate"
              :datePicker="activeDate"
              @dayClick="dayClick"
              @monthClick="monthClick"
              @yearClick="yearClick"
      >
      </m-date>
      <div class="dateBtn">
        <time-btn @changeBtn="tapBtn" :btnText="btnText" :activeDateBtn="activeDateBtn"></time-btn>
      </div>
    </div>
    <Row :gutter="10" class="font-m">
      <i-col span="4" v-for="(item,index) in totalProduct" :key="index">
        <div class="dosage-item" style="color: #7DA1FF">
          <div class="use-type">{{item.type}}</div>
          <div class="col-fff use-num">
            <span>{{item.useNum}}</span><em>{{item.unit}}</em>
          </div>
        </div>
      </i-col>
    </Row>
    <Row :gutter="10" class="font-m col-fff">
      <i-col span="16">
        <div class="public public-bg">
          <div class="padd-r clearfix">
            <div class="char-title-left">
              <div class="inb-start char-title-line"></div>
              <span class="font-ll char-title">供冷趋势图</span>
            </div>
            <div class="char-title-right" v-show="gasList.length > 0">
              <ul class="variety-gas">
                <li v-for="(item, index) in gasList" :key="index"
                    :style="{backgroundColor:isTotalGas? '':'#213f80'}"
                    @click="tapGasChild(item)">
                  <i class="dot" :style="item.flag? item.color : '' "></i>{{item.name}}
                </li>
              </ul>
              <div class="total-gas" :style="{backgroundColor: isTotalGas? '#213f80': ''}" @click="tapTotalGas">
                <i class="dot small-circle" :style="{backgroundColor:isTotalGas?'#43CCBA':''}"></i>
                总供冷
              </div>
            </div>
          </div>
          <div v-show="isTotalGas">
            <div id="totalGasSupply" ref="totalGasSupply"></div>
          </div>
          <div v-show="!isTotalGas">
            <div id="otherGasline" ref="otherGasline"></div>
          </div>
        </div>
      </i-col>
      <i-col span="8">
        <div class="public public-sg">
          <div class="mar-bot-m">
            <div class="inb-start char-title-line"></div>
            <span class="font-ll char-title">用冷占比</span>
          </div>
          <div class="cirle-chart">
            <div class="chart-text">
              <div class="inb" id="gasChart" ref="gasChart"></div>
              <div class="font-s text-r">
                <Row style="width: 270px;" v-for="(item, index) in useGasPercent" :key="index">
                  <i-col :span="2">
                    <div class="dot"
                         style="margin-right: 20px; background-color: red;"
                         :style="'background-color:' + eleColor[item.name] + ';'"
                    ></div>
                  </i-col>
                  <i-col :span="8">
                    <span>{{item.name}}</span>
                  </i-col>
                  <i-col :span="10">
                    <span>{{item.value| num2numStr}}</span>
                  </i-col>
                  <i-col :span="4">
                    <span v-if="gasPercentTotal !== '0.00'">{{item.value?(item.value/gasPercentTotal*100).toFixed(2) : item.vuale}}%</span>
                    <span v-else>{{gasPercentTotal}}%</span>
                  </i-col>
                </Row>
              </div>
            </div>
          </div>
        </div>
      </i-col>
    </Row>
    <Row :gutter="10" class="font-m col-fff">
      <i-col span="16">
        <div class="public public-bg">
          <div class="padd-r clearfix">
            <div class="char-title-left">
              <div class="inb-start char-title-line"></div>
              <span class="font-ll char-title">耗能趋势图</span>
            </div>
            <div class="char-title-right" v-show="electricityList.length > 0">
              <ul class="variety-gas">
                <li v-for="(item, index) in electricityList" :key="index"
                    :style="{backgroundColor:isTotalEle? '':'#213f80'}" @click="isTotalEleChangeChild(item)">
                  <i class="dot" :style="item.flag ? item.color: ''"></i>
                  {{item.name}}
                </li>
              </ul>
              <div class="total-gas" :style="{backgroundColor: isTotalEle?'#213f80':''}" @click="isTotalEleChange">
                <i class="dot small-circle" :style="{backgroundColor: isTotalEle?'#43CCBA':''}"></i>
                总耗电
              </div>
              <!--                <div class="load-icon"><img src="../../../assets/mainImages/icon_hold.png" alt=""></div>-->
            </div>
          </div>
          <div v-show="isTotalEle">
            <div id="energySupply" ref="energySupply"></div>
          </div>
          <div v-show="!isTotalEle">
            <div id="consumeEnergy" ref="consumeEnergy"></div>
          </div>
        </div>
      </i-col>
      <i-col span="8">
        <div class="public public-sg">
          <div class="mar-bot-m">
            <div class="inb-start char-title-line"></div>
            <span class="font-ll char-title">耗电占比</span>
          </div>
          <div class="cirle-chart">
            <div class="chart-text">
              <div class="inb" id="powerChart" ref="powerChart"></div>
              <div class="font-s text-r">
                <Row style="width: 270px;" v-for="(item, index) in consumeElectricityPercent" :key="index">
                  <i-col :span="2">
                    <div class="dot"
                         style="margin-right: 20px; background-color: red;"
                         :style="'background-color:' + eleColor[item.name] + ';'"
                    ></div>
                  </i-col>
                  <i-col :span="8">
                    <span>{{item.name}}</span>
                  </i-col>
                  <i-col :span="10">
                    <span>{{item.value| num2numStr}}</span>
                  </i-col>
                  <i-col :span="4">
                    <span v-if="consumeElectricityPercentTotal !== '0.00'">{{item.value?(item.value/consumeElectricityPercentTotal*100).toFixed(2) : item.vuale}}%</span>
                    <span v-else>{{consumeElectricityPercentTotal}}%</span>
                  </i-col>
                </Row>
              </div>
            </div>
          </div>
        </div>
      </i-col>
    </Row>
  </div>
</template>
<script>
  import echarts from 'echarts'
  import {mapState} from 'vuex'
  import {formatDate} from '../../../util/date'
  import transformFilters from '../../../util/transformFilters'
  import timeBtn from '../../../components/common/timeBtn'
  import mDate from '../../../components/common/mDate'

  export default {
    name: 'energy',
    props: {},
    mixins: [transformFilters],
    // filters: {
    //   _this: this,
    //   num2numStr (num) {
    //     num = num + ''
    //     if (num.indexOf('.') !== -1) {
    //       return num
    //     } else {
    //       let numbers = num.split('').reverse()
    //       let numStr = ''
    //       numbers.forEach((num, index) => {
    //         if (index !== 0 && index % 3 === 0) {
    //           numStr = num + '' + numStr
    //         } else {
    //           numStr = num + '' + numStr
    //         }
    //       })
    //       return numStr
    //     }
    //   }
    // },
    data () {
      return {
        // 日期三级联动的时间（格式为数组）
        activeDate: formatDate(new Date(), 'yyyy-MM-dd'),
        activeDateBtn: '今日',
        // 今日，本月，今年 组件
        btnText: ['今日', '本月', '今年'],
        // 条形图&&折线图 --供能 用电 start  // 颜色对象
        eleColor: {
          '机加用冷': '#FF8540',
          '铸造用冷': '#43CCBA',
          '溶射用冷': '#EFAD0E',
          '焊装用冷': '#3C30F5',
          '冲压用冷': '#92FF1E',
          '其他用冷': '#A466F7',
          '总装用冷': '#D062F3',
          '总供冷': '#0f0',
          '主机用电': '#FF8540',
          '泵组用电': '#43CCBA',
          '风机用电': '#EFAD0E',
          '其他用电': '#f5758e',
          '总用电': '#D1FF28'
        },
        //
        randomColor: ['#FF8540', '#43CCBA', '#EFAD0E', '#A466F7','#3C30F5'],
        gasList: [],
        isTotalGas: true,
        backups: [],
        // 总装用气条形图数据
        totalBarGas: {
          xDatas: [],
          series: []
        },
        // 其他用气折线图数据
        GasLineChart: {
          xAisData: [],
          seriesData: []
        },
        // 条形图&&折线图 --耗能 用电 start
        // 条形图x 、y轴的数据
        barObj: {
          xDatas: [],
          series: []
        },
        // 折线图数据
        consumeEnergyData: {
          xAisData: [],
          seriesData: []
        },
        // 各种用电的数组
        electricityList: [],
        // 判断是否是总用电
        isTotalEle: true,
        // 备份数组
        backCopy: [],
        // 用电 end
        // 用气占比饼状图
        useGasPercent: [],
        pieGasTitle: '',
        // 耗电占比饼状图
        consumeElectricityPercent: [],
        pieElectricityTitle: '',
        // 总产量
        totalProduct: [
          {type: '总冷量', useNum: 0, unit: 'm³'},
          {type: '总用水', useNum: 0, unit: 'm³'},
          {type: '总耗电', useNum: 0, unit: 'kwh'},
          {type: '总电费', useNum: 0, unit: '元'},
          {type: '单方用电', useNum: 0, unit: 'kwh'},
          {type: '单方电费', useNum: 0, unit: '元'}
        ],
        // 7月 27日 新需求 更改的 数据
        objId: {}
        // commonTime: null
      }
    },

    created () {
    },
    mounted () {
      // 异步解决
      // 公共数据的方法
      // this.commonTime = setTimeout(() => {
      //   this.commonGetData()
      // }, 500)
      this.commonGetData()
      this._timerFun(120000)
    },
    computed: {
      gasPercentTotal () {
        return this.useGasPercent.reduce((pre, next) => {
          return pre + parseFloat(next.value)
        }, 0).toFixed(2)
      },
      consumeElectricityPercentTotal () {
        return this.consumeElectricityPercent.reduce((pre, next) => {
          return pre + parseFloat(next.value)
        }, 0).toFixed(2)
      },
      ...mapState('user', {
        facility: state => state.facility
      })
    },
    methods: {
      // 7月01日后的清空方法
      allEmpty () {
        this.totalProduct = [
          {type: '总气量', useNum: 0, unit: 'm³'},
          {type: '总用水', useNum: 0, unit: 'm³'},
          {type: '总耗电', useNum: 0, unit: 'kwh'},
          {type: '总电费', useNum: 0, unit: '元'},
          {type: '单方用电', useNum: 0, unit: 'kwh'},
          {type: '单方电费', useNum: 0, unit: '元'}
        ]
        this.electricityList = []
        this.consumeElectricityPercent = []
        this.useGasPercent = []
        this.gasList = []
        // 清除 echarts 实例
        echarts.init(this.$refs.energySupply).clear()
        echarts.init(this.$refs.consumeEnergy).clear()
        echarts.init(this.$refs.powerChart).clear()
        echarts.init(this.$refs.totalGasSupply).clear()
        echarts.init(this.$refs.otherGasline).clear()
        echarts.init(this.$refs.gasChart).clear()
      },
      dayClick () {
        this.activeDate = this.$refs.mDate.year + '-' + this.$refs.mDate.month + '-' + this.$refs.mDate.day
        this.getFiveData(this.activeDate)
      },
      monthClick () {
        this.activeDate = this.$refs.mDate.year + '-' + this.$refs.mDate.month
        this.getFiveData(this.activeDate)
      },
      yearClick () {
        this.activeDate = this.$refs.mDate.year
        this.getFiveData(this.activeDate)
      },
      // 点击时间按钮
      tapBtn (prop) {
        if (prop === this.activeDateBtn) return
        this.activeDateBtn = prop
        let fmt = ''
        switch (prop) {
          case '今日':
            fmt = 'yyyy-MM-dd'
            break
          case '本月':
            fmt = 'yyyy-MM'
            break
          case '今年':
            fmt = 'yyyy'
            break
        }
        this.activeDate = formatDate(new Date(), fmt)
        this.getFiveData(this.activeDate)
      },
      // 总用气切换 改变方法
      tapTotalGas () {
        this.isTotalGas = !this.isTotalGas
        // 判断总用气如果为true的, 样式 每一项 标记改为 false
        if (this.isTotalGas) {
          this.gasList.forEach(item => {
            item.flag = false
          })
          this.$nextTick(() => {
            echarts.init(this.$refs.totalGasSupply).resize()
          })
        } else {
          // 否则 折线图要显示, 样式每一项 标记 改为true
          this.gasList.forEach(item => {
            item.flag = true
          })
          this.GasLineChart.seriesData = [...this.backups]
          this.$nextTick(() => {
            echarts.init(this.$refs.otherGasline).resize()
            this.initConsumeEnergy(this.GasLineChart)
          })
        }
      },
      // 各个孩子用气的 改变方法
      tapGasChild (item) {
        item.flag = !item.flag
        // 折线图 对应修改数据
        // 如果总装用气  为false 的时候
        if (!this.isTotalGas) {
          // 如果为真 就 添加一个 ，否则 就删除一个
          if (item.flag) {
            // 在备份 数组里找到 type 等等等于 item.name的 对象 放到折线图 要显示的 数组中
            this.GasLineChart.seriesData.push(this.backups.find(k => k.type === item.name))
          } else {
            // 找到数组的 索引 删除之
            let index = this.GasLineChart.seriesData.findIndex(v => v.type === item.name)
            if (index > -1) {
              this.GasLineChart.seriesData.splice(index, 1)
            }
          }
        } else {
          // 否则 总用电 为true 的时候, 点击各个孩子用电的方法, 要把 总用电 判断变为 false, 折线图的数据要清空,之后再 push进一个孩子
          this.isTotalGas = false
          this.GasLineChart.seriesData = []
          if (item.flag) {
            // 在备份 数组里找到 type 等等等于 item.name的 对象 放到折线图 要显示的 数组中
            this.GasLineChart.seriesData.push(this.backups.find(k => k.type === item.name))
          } else {
            // 找到数组的 索引 删除之
            let index = this.GasLineChart.seriesData.findIndex(v => v.type === item.name)
            if (index > -1) {
              this.GasLineChart.seriesData.splice(index, 1)
            }
          }
        }
        // 重绘折线图
        this.$nextTick(() => {
          echarts.init(this.$refs.otherGasline).resize()
          this.initConsumeEnergy(this.GasLineChart)
        })
        // 如果 各个子级 孩子 的用电都没 选择, 重绘总用电
        if (!this.GasLineChart.seriesData.length) {
          this.isTotalGas = true
          this.$nextTick(() => {
            this.initEnergySupply(this.totalBarGas)
          })
        }
      },
      // 总用电切换 改变方法
      isTotalEleChange () {
        this.isTotalEle = !this.isTotalEle
        // 判断总用电如果为true的, 样式 每一项 标记改为 false
        if (this.isTotalEle) {
          this.electricityList.forEach(item => {
            item.flag = false
          })
          this.$nextTick(() => {
            // this.initEnergySupply(this.barObj, true)
            echarts.init(this.$refs.energySupply).resize()
          })
        } else {
          // 否则 折线图要显示, 样式每一项 标记 改为true
          this.electricityList.forEach(item => {
            item.flag = true
          })
          this.consumeEnergyData.seriesData = [...this.backCopy]
          this.$nextTick(() => {
            echarts.init(this.$refs.consumeEnergy).resize()
            this.initConsumeEnergy(this.consumeEnergyData, true)
          })
        }
      },
      // 各个孩子用电的 改变方法
      isTotalEleChangeChild (item) {
        item.flag = !item.flag
        // 折线图 对应修改数据
        // 如果总用电  为false 的时候
        if (!this.isTotalEle) {
          // 如果为真 就 添加一个 ，否则 就删除一个
          if (item.flag) {
            // 在备份 数组里找到 type 等等等于 item.name的 对象 放到折线图 要显示的 数组中
            this.consumeEnergyData.seriesData.push(this.backCopy.find(k => k.type === item.name))
          } else {
            // 找到数组的 索引 删除之
            let index = this.consumeEnergyData.seriesData.findIndex(v => v.type === item.name)
            if (index > -1) {
              this.consumeEnergyData.seriesData.splice(index, 1)
            }
          }
        } else {
          // 否则 总用电 为true 的时候, 点击各个孩子用电的方法, 要把 总用电 判断变为 false, 折线图的数据要清空,之后再 push进一个孩子
          this.isTotalEle = false
          this.consumeEnergyData.seriesData = []
          if (item.flag) {
            // 在备份 数组里找到 type 等等等于 item.name的 对象 放到折线图 要显示的 数组中
            this.consumeEnergyData.seriesData.push(this.backCopy.find(k => k.type === item.name))
          } else {
            // 找到数组的 索引 删除之
            let index = this.consumeEnergyData.seriesData.findIndex(v => v.type === item.name)
            if (index > -1) {
              this.consumeEnergyData.seriesData.splice(index, 1)
            }
          }
        }
        // 重绘折线图
        this.$nextTick(() => {
          echarts.init(this.$refs.consumeEnergy).resize()
          this.initConsumeEnergy(this.consumeEnergyData, true)
        })
        // 如果 各个子级 孩子 的用电都没 选择, 重绘总用电
        if (!this.consumeEnergyData.seriesData.length) {
          this.isTotalEle = true
          this.$nextTick(() => {
            this.initEnergySupply(this.barObj, true)
          })
        }
      },
      // 刷新数据
      refreshData () {
        this.commonGetData()
      },
      /**
       * 7月27日新需求 更改接口
       */
      // 获取 id 的接口
      // 获得 mTabs 分页的id 请求各个设备的 id 的方法
      _getSondids (params) {
        return window.myapi.getEnergyEffi(params).then(res => {
          return res.data.data
        }).catch((e) => {
        })
      },
      // 异步解决
      async commonGetData () {
        let params = {
          spaceId: this.facility,
          type: 102
        }
        this.objId = await this._getSondids(params).then(res => res)
        if (Object.keys(this.objId).length > 0) {
          this.getFiveData(this.activeDate)
        } else {
          this.$Notice.warning({
            title: '提示',
            desc: '站房无数据，请补充数据....'
          })
        }
      },
      // 公共的 请求 5个 放到一起的 接口
      getFiveData (time) {
        // 总的 数据的 接口
        let totalData = {
          id: this.objId[0],
          time: time
        }
        this.totalOutPut(totalData)
        // 供冷趋势图的接口
        let coolLine = {
          id: this.objId[1],
          time: time,
          zone: 1
        }
        this.barEnergyData(coolLine)
        // 用冷占比的接口
        let coolPie = {
          id: this.objId[2],
          time: time,
          zone: 2
        }
        this.pieGasData(coolPie)
        // 耗能趋势图
        let coolElectricityLine = {
          id: this.objId[3],
          time: time,
          zone: 1
        }
        this.lineChart(coolElectricityLine)
        // 耗电占比的 接口
        let coolElectricityPie = {
          id: this.objId[4],
          time: time,
          zone: 2
        }
        this.pieProwerData(coolElectricityPie)
      },
      // 加载总产量数据
      totalOutPut (data) {
        new window.Api(data, 'POST').getData().then(res => {
          if (res.data.status === 200) {
            if (res.data.jsData) {
              this.totalProduct = res.data.jsData
            }
          }
        })
      },
      // 条形图数据
      barEnergyData (data) {
        new window.Api(data, 'POST').getData().then(res => {
          if (res.data.status === 200) {
            if (res.data.jsData === null) return false
            let gasLineChart = res.data.jsData.yaxis
            let index = gasLineChart.findIndex(item => item.type === '总供冷')
            let totalCool = null
            if (index > -1) {
              totalCool = gasLineChart.splice(index, 1)
              this.gasList = gasLineChart.map(item => {
                let obj = {
                  name: item.type,
                  color: {backgroundColor: this.eleColor[item.type] || '#f00'},
                  flag: false
                }
                return obj
              })
            }
            // 条形图数据
            let totalGasData = {
              xDatas: res.data.jsData.xaxis,
              series: totalCool
            }
            // 折线图数据
            let otherGasData = {
              xAisData: res.data.jsData.xaxis,
              seriesData: gasLineChart
            }
            this.backups = [...gasLineChart]
            // 总用气条形图数据
            this.totalBarGas = {...totalGasData}
            // 其他用气折线图数据
            this.GasLineChart = {...otherGasData}
            // 重绘折线图和柱状图
            this.initConsumeEnergy(this.GasLineChart)
            // 重绘折线图之后 每一个对象 的 flag 为true
            if (!this.isTotalGas) {
              this.gasList.forEach(item => {
                item.flag = true
              })
            }
            this.initEnergySupply(this.totalBarGas)
          }
        })
      },
      // 饼状图--耗电
      pieProwerData (data) {
        new window.Api(data, 'POST').getData().then(res => {
          if (res.data.status === 200) {
            if (res.data.jsData === null) return false
            this.consumeElectricityPercent = res.data.jsData.datas
            this.initconsumeProwerChart()
          }
        })
      },
      // 饼状图--用气
      pieGasData (data) {
        new window.Api(data, 'POST').getData().then(res => {
          if (res.data.status === 200) {
            if (res.data.jsData === null) return false
            const gasPercent = res.data.jsData.datas.slice(0, 5)
            this.useGasPercent = gasPercent
            this.initUseGasChart()
          }
        })
      },
      // 折线图--耗能
      lineChart: function (data) {
        new window.Api(data, 'POST').getData().then(res => {
          if (res.data.status === 200) {
            if (res.data.jsData === null) return false
            let lineData = res.data.jsData.yaxis
            let index = lineData.findIndex(item => item.type === '总用电')
            let supplyData = null
            if (index > -1) {
              supplyData = lineData.splice(index, 1)
              this.electricityList = lineData.map(item => {
                let obj = {
                  name: item.type,
                  color: {backgroundColor: this.eleColor[item.type] || '#f00'},
                  flag: false
                }
                return obj
              })
            }
            let chartSupplyData = {
              xDatas: res.data.jsData.xaxis,
              series: supplyData
            }
            let chartLineData = {
              xAisData: res.data.jsData.xaxis,
              seriesData: lineData
            }
            // 备份一个 数组 留给各个子级 用电对比用的
            // this.backCopy = JSON.parse(JSON.stringify(lineData))
            this.backCopy = [...lineData]
            // 总用电 的折线图 需要的数据
            this.consumeEnergyData = {...chartLineData}
            // 总用电的 柱状图需要的数据
            this.barObj = {...chartSupplyData}
            // 重绘折线图和柱状图
            this.initConsumeEnergy(this.consumeEnergyData, true)
            // 重绘折线图之后 每一个对象 的 flag 为true
            if (!this.isTotalEle) {
              this.electricityList.forEach(item => {
                item.flag = true
              })
            }
            this.initEnergySupply(this.barObj, true)
          }
        })
      },
      // 初始化供能趋势图
      initEnergySupply: function (energyType, flag) {
        let self = this
        let dom = flag ? self.$refs.energySupply : self.$refs.totalGasSupply
        let myChart = echarts.init(dom)
        let option = {
          title: {show: false},
          grid: {
            left: '65px',
            right: '70px',
            bottom: '70px',
            top: '40px',
            containLabel: false
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              shadowStyle: {
                color: '#132554'
              },
              z: -100
            },
            backgroundColor: '#fff',
            textStyle: {
              color: '#333',
              fontSize: 12
            },
            // formatter: '{c}',
            formatter: function (data) {
              return self._num2numStr(data[0].value)
            }

          },
          toolbox: {
            height: 30,
            top: '0%',
            right: '2%',
            // left: '4%',
            feature: {
              saveAsImage: {
                backgroundColor: '#15295f',
                iconStyle: {
                  borderColor: '#fff',
                  borderWidth: 2
                }
              }
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: ['30%', '20%'],
            name: energyType.xDatas.length > 12 ? (energyType.xDatas.length > 25 ? '(天)' : '(时)') : '(月)',
            nameTextStyle: {
              color: '#fff',
              padding: [50, 0, 0, 0]
            },
            data: ['26', '27', '28', '29', '30', '31'],
            axisLine: {
              show: true,
              lineStyle: {
                color: '#8C99B6'
              }
            },
            axisLabel: {
              color: '#fff',
              interval: 0,
              margin: 20
            },
            axisTick: {
              length: 10,
              alignWithLabel: true,
              lineStyle: {
                color: '#8C99B6'
              }
            }
          },
          yAxis: {
            type: 'value',
            show: true,
            name: flag ? '(Kw)' : '(m³)',
            nameTextStyle: {
              color: '#fff',
              padding: [0, 50, 0, 0]
            },
            nameGap: 20,
            position: 'left',
            splitLine: {
              lineStyle: {
                type: 'dashed',
                show: false,
                color: '#8C99B6'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#8C99B6'
              }
            },
            // axisTick: {
            //   length: 0
            // },
            axisLabel: {
              inside: false,
              margin: 15,
              show: true,
              color: '#fff',
              formatter: (value) => {
                if (value >= 10000 && value < 10000000) {
                  value = value / 10000 + '万'
                } else if (value >= 10000000 && value < 100000000) {
                  value = value / 10000000 + '千万'
                } else if (value >= 100000000) {
                  value = value / 100000000 + '亿'
                }
                return value
              }
            }
          },
          series: [{
            data: [],
            type: 'bar',
            color: '#48CCBB',
            barMaxWidth: '36%'
          }, {
            data: [],
            type: 'bar',
            color: '#48CCBB',
            barMaxWidth: '36%'
          }]
        }
        option.xAxis.data = energyType.xDatas
        option.series = energyType.series.map(item => {
          let obj = {
            data: item.data,
            type: 'bar',
            color: '#48CCBB',
            barMaxWidth: '36%'
          }
          return obj
        })
        if (option && typeof option === 'object') {
          myChart.setOption(option, true)
          window.addEventListener('resize', () => {
            myChart.resize()
          })
        }
      },
      // 初始化耗能趋势图
      initConsumeEnergy (consumeType, flag) {
        let dom = flag ? this.$refs.consumeEnergy : this.$refs.otherGasline
        let myChart = echarts.init(dom)
        let option = {
          title: {
            show: false
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line'
            },
            backgroundColor: '#fff',
            textStyle: {
              color: '#333',
              fontSize: 12
            }
          },
          toolbox: {
            height: 30,
            top: '0%',
            right: '2%',
            // left: '4%',
            feature: {
              saveAsImage: {
                backgroundColor: '#15295f',
                iconStyle: {
                  borderColor: 'fff',
                  borderWidth: 2
                }
              }
            }
          },
          legend: {
            show: false
          },
          grid: {
            left: '65px',
            right: '65px',
            bottom: '55px',
            top: '44px',
            containLabel: false
          },
          xAxis: [
            {
              type: 'category',
              name: consumeType.xAisData.length > 12 ? (consumeType.xAisData.length > 25 ? '(天)' : '(时)') : '（月）',
              nameGap: 10,
              nameTextStyle: {
                color: '#fff',
                padding: [50, 0, 0, 0]
              },
              boundaryGap: ['20%', '20%'],
              // boundaryGap: false,
              // data: Array.from({length: 60}, (v, k) => k + 1),
              data: [],
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#8C99B6',
                  width: 2
                }
              },
              axisLabel: {
                color: '#fff',
                margin: 20
              },
              axisTick: {
                length: 10,
                alignWithLabel: true,
                lineStyle: {
                  color: '#8C99B6'
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              show: true,
              name: '(Kw)',
              // nameLocation: 'middle',
              nameTextStyle: {
                color: '#fff',
                padding: [0, 50, 0, 0]
              },
              nameGap: 20,
              // min: 0,
              // max: 250,
              // scale: true,
              position: 'left',
              splitLine: {
                lineStyle: {
                  type: 'dashed',
                  show: false,
                  color: '#8C99B6'
                  // opacity: 0
                }
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#8C99B6'
                }
              },
              // axisTick: {
              //   length: 0
              // },
              axisLabel: {
                inside: false,
                margin: 15,
                show: true,
                color: '#fff',
                formatter: (value) => {
                  if (value >= 10000 && value < 10000000) {
                    value = value / 10000 + '万'
                  } else if (value >= 10000000 && value < 100000000) {
                    value = value / 10000000 + '千万'
                  } else if (value >= 100000000) {
                    value = value / 100000000 + '亿'
                  }
                  return value
                }
              }
            }
          ],
          series: [
            {
              name: '',
              smooth: true,
              type: 'line',
              // yAxisIndex: 0,
              // stack: '总量',
              color: '#7489F6',
              itemStyle: {
                normal: {
                  lineStyle: {
                    // width: 0.9
                  }
                }
              },
              lineStyle: '#7489F6',
              data: []
            }
          ]
        }
        let consumeEnergyData = consumeType
        let xAisData = consumeEnergyData.xAisData
        let seriesDatas = consumeEnergyData.seriesData
        seriesDatas = seriesDatas.map(item => {
          let obj = {
            name: item.type,
            data: item.data,
            smooth: true,
            type: 'line',
            color: this.eleColor[item.type] || '#f00',
            lineStyle: '#7489F6'
          }
          return obj
        })
        option.xAxis[0].data = xAisData
        option.series = seriesDatas
        if (option && typeof option === 'object') {
          myChart.setOption(option, true)
          window.addEventListener('resize', () => {
            myChart.resize()
          })
        }
      },
      // 初始化用气饼状图
      initUseGasChart () {
        let dom = this.$refs.gasChart
        let myChart = echarts.init(dom)
        let option = null
        option = {
          title: {
            // text: `${this.pieGasTitle}\n\n` + this._num2numStr(this.gasPercentTotal),
            textVerticalAlign: 'middle',
            textStyle: {
              color: '#fff',
              fontWeight: 'normal'
            },
            width: 200,
            height: 50,
            textAlign: 'center',
            left: '48%',
            top: '40%'
          },
          tooltip: {
            show: true,
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          series: [
            {
              name: '用冷',
              type: 'pie',
              radius: ['67%', '90%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: false,
                  textStyle: {
                    fontSize: '18'
                  },
                  formatter: [
                    '{b}\n',
                    '{c}'
                  ].join('\n')
                },

                color: '#000'
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              emphasis: {},
              itemStyle: {
                borderWidth: 5,
                borderType: 'solid',
                borderColor: 'rgba(22, 44, 99,0)'
                // shadowColor: 'rgba(0, 0, 0, 0.5)',
                // shadowBlur: 10
              },
              data: []
            }
          ]
        }
        // 饼图 样式 的修改
        if (!this.useGasPercent.length) {
          option.title.text = ''
        } else {
          // 给饼 图 每个 对象 添加 不同的样式
          let useGasPercent = this.useGasPercent
          useGasPercent = useGasPercent.map(item => {
            return {
              name: item.name,
              value: item.value,
              itemStyle: {color: this.eleColor[item.name] || '#f00'},
              label: {color: '#fff'}
            }
          })
          option.series[0].data = useGasPercent
        }
        if (option && typeof option === 'object') {
          myChart.setOption(option, true)
        }
      },
      // 初始化耗电饼状图
      initconsumeProwerChart () {
        let dom = this.$refs.powerChart
        let myChart = echarts.init(dom)
        let option = null
        option = {
          title: {
            // text: `fljaks\n\n${0}`,
            textVerticalAlign: 'middle',
            textStyle: {
              color: '#fff',
              fontWeight: 'normal'
            },
            width: 200,
            height: 50,
            textAlign: 'center',
            left: '48%',
            top: '40%'
          },
          tooltip: {
            show: true,
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          series: [
            {
              name: '用电',
              type: 'pie',
              radius: ['67%', '90%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: false,
                  textStyle: {
                    fontSize: '18'
                  },
                  formatter: [
                    '{b}\n',
                    '{c}'
                  ].join('\n')
                },

                color: '#000'
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              emphasis: {},
              itemStyle: {
                borderWidth: 5,
                borderType: 'solid',
                borderColor: 'rgba(22, 44, 99,0)'
                // shadowColor: 'rgba(0, 0, 0, 0.5)',
                // shadowBlur: 10
              },
              data: []
            }
          ]
        }
        // 饼图 样式 的修改
        if (!this.consumeElectricityPercent.length) {
          option.title.text = ''
        } else {
          // 给饼 图 每个 对象 添加 不同的样式
          let consumeElectricityPercent = this.consumeElectricityPercent
          consumeElectricityPercent = consumeElectricityPercent.map((item, index) => {
            return {
              name: item.name,
              value: item.value,
              itemStyle: {color: this.randomColor[index] || '#f00'},
              label: {color: '#fff'}
            }
          })
          option.series[0].data = consumeElectricityPercent
        }
        if (option && typeof option === 'object') {
          myChart.setOption(option, true)
        }
      }
    },
    destroyed () {
      // clearTimeout(this.commonTime)
    },
    components: {mDate, timeBtn}
  }
</script>

<style lang='scss' scoped>
  #cooling-energy {
    @include energy;
  }
</style>
